<template>
  <div class="product-property-con">
    <div v-if="showValueList && showValueList[0]">
      <a-row>
        <a-col class="mb10" :span="8" v-for="(item, index) of props.propertyList" :key="index">
          <a-space>
            <div :class="[item.propRequired ? 'required' : '']" style="min-width: 80px; text-align: right">{{ item.prop.name }}</div>
            <a-select :style="{ width: '250px' }" v-if="item.prop.type == 1" v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueStr" allow-clear placeholder="请选择">
              <a-option v-for="propVal of item.prop.propValueList" :key="propVal.id" :value="propVal.propValue">{{ propVal.propValue }}</a-option>
            </a-select>
            <a-select :style="{ width: '250px' }" v-if="item.prop.type == 2" multiple :max-tag-count="1" v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueStrList" allow-clear placeholder="请选择">
              <a-option v-for="propVal of item.prop.propValueList" :key="propVal.id" :value="propVal.propValue">{{ propVal.propValue }}</a-option>
            </a-select>
            <a-switch v-if="item.prop.type == 3" v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueBoolean"></a-switch>
            <a-input v-if="item.prop.type == 4" v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueStr" :style="{ width: '250px' }" :max-length="item.prop.txtLength" show-word-limit></a-input>
            <a-input-number v-if="item.prop.type == 5" v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueNumber" :style="{ width: '250px' }" placeholder="请输入" :min="0" hide-button>
              <template #suffix>
                {{ item.prop.unit }}
              </template>
            </a-input-number>
            <a-input-number v-if="item.prop.type == 6" v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueBigDecimal" :style="{ width: '250px' }" placeholder="请输入" :min="0" hide-button>
              <template #suffix>
                {{ item.prop.unit }}
              </template>
            </a-input-number>
            <div v-if="item.prop.type == 7">
              <a-input v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueStrList[0]" :style="{ width: '95px' }" placeholder="请输入" allow-clear hide-button>
                <template #suffix>
                  {{ item.prop.unit }}
                </template>
              </a-input>
              <a-input v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueStrList[1]" :style="{ width: '95px', margin: '0 2px' }" placeholder="请输入" allow-clear hide-button>
                <template #suffix>
                  {{ item.prop.unit }}
                </template>
              </a-input>
              <a-input v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueStrList[2]" :style="{ width: '95px' }" placeholder="请输入" allow-clear hide-button>
                <template #suffix>
                  {{ item.prop.unit }}
                </template>
              </a-input>
            </div>
            <div v-if="item.prop.type == 8">
              <a-input v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueStrList[0]" :style="{ width: '120px' }" placeholder="请输入" allow-clear hide-button>
                <template #suffix>
                  {{ item.prop.unit }}
                </template>
              </a-input>
              <a-input v-model="showValueList[showValueList.findIndex((e:any) => e.code == item.prop.code)].valueStrList[1]" :style="{ width: '120px', marginLeft: '5px' }" placeholder="请输入" allow-clear hide-button>
                <template #suffix>
                  {{ item.prop.unit }}
                </template>
              </a-input>
            </div>
          </a-space>
        </a-col>
      </a-row>
    </div>
    <a-empty v-else description="请先选择类目获取属性模板" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue'
  const props: any = defineProps(['propertyList', 'type'])
  const showValueList: any = ref([])

  const init = (list: any) => {
    console.log(list)
    showValueList.value = []
    list.forEach((e: any) => {
      let obj: any = {
        code: e.prop.code,
        name: e.prop.name,
        nameEn: e.prop.nameEn,
        propId: e.prop.id,
        sort: e.prop.sort,
        type: e.prop.type,
        unit: e.prop.unit,
        valueBigDecimal: 0,
        valueBoolean: true,
        valueNumber: 0,
        valueStr: '',
        valueStrList: [],
        propRequired: e.propRequired,
      }
      showValueList.value.push(obj)
    })
    console.log(showValueList.value)
  }

  defineExpose({ showValueList, init })
</script>

<style lang="less" scoped>
  .product-property-con {
    margin: 10px;
  }
</style>
